<template>
  <div class="jb">
    <hrComponent :headerData="headerData" :tableData="tableData">
      <!-- 添加部门按钮 -->
      <template v-slot:btnSlot>
        <div class="left">
          <el-button type="success" @click="addDepartment()"
            >+添加岗位</el-button
          >
        </div>
        <div class="right">
          <span class="iconBox">
            <i class="el-icon-set-up"></i>
          </span>
          <span class="iconBox">
            <i class="el-icon-upload2"></i>
          </span>
          <span class="iconBox">
            <i class="el-icon-printer"></i>
          </span>
        </div>
        <div class="clear"></div>
      </template>
      <template v-slot:operationBtn="{ row }">
        <span class="detailBtn" >详情</span><span class="editBtn">编辑</span
        ><span class="delBtn">删除</span>
      </template>


    </hrComponent>
  </div>
</template>
<script>
import { dsDataGet } from "@/api/Mock"; //mock数据
import hrComponent from "@/components/hrComponent";
export default {
  data() {
    return {
      headerData: [
        {
          prop: "id",
          label: "ID号",
          width: "180",
        },
        {
          prop: "post",
          label: "岗位名称",
          width: "180",
        },
        {
          prop: "permission",
          label: "权限角色",
          width: "180",
        },
        {
          prop: "remark",
          label: "备注",
       
        },
        {
          prop: "price",
          label: "岗位工时单价（元）",
          width: "180",
        },
        {
          prop: "state",
          label: "状态",
          width: "180",
        },
      ],
      tableData:[]
    };
  },
  components: {
    hrComponent,
  },
  methods:{
    getTableData() {
      let _self = this;
      dsDataGet().then((res) => {
        console.log(res);
        _self.tableData = res.dsData.tableData;
      });
    },
  },
  mounted() {
    this.getTableData();
  },
};
</script>
<style>
.hrButton i {
  font-size: 20px;
}
.iconBox{
  padding:10px;
  border :1px solid #eeee;
  margin: 5px;
}
.jb .detailBtn {
  color: white;
  background-color: #6cc16c;
  border: none;
  padding: 6px;
}
.jb .detailBtn:hover {
  cursor: pointer;
}
.jb .editBtn {
  color: white;
  background-color: #3d9cff;
  border: none;
  padding: 6px;
}
.jb .editBtn:hover {
  cursor: pointer;
}
.jb .delBtn {
  color: white;
  background-color: #ff5823;
  border: none;
  padding: 6px;
}
.jb .delBtn:hover {
  cursor: pointer;
}
</style>